<script setup lang='ts'>
import { computed } from 'vue'
import {
  NModal,
  NTabPane,
  NTabs, NTable
} from 'naive-ui'
import { consumerRecord } from '@/components/common'

interface Props {
  visible: boolean
}

interface Emit {
  (e: 'update:visible', visible: boolean): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emit>()
const show = computed({
  get() {
    return props.visible
  },
  set(visible: boolean) {
    emit('update:visible', visible)
  },
})
</script>

<template>
  <NModal v-model:show="show" :auto-focus="true" title="消费记录" style="width: 100%; max-width: 900px;" preset="card">
    <div>

      <NTabs type="line">
        <NTabPane name="消费记录" tab="消费记录">
          <consumerRecord />
        </NTabPane>

        <NTabPane name="收费标准" tab="收费标准">
          <div style="width: 100%;height: 500px;overflow: auto;">
            <n-table :single-line="false">
              <thead>
                <tr>
                  <th>模型名称</th>
                  <th>输入</th>
                  <th>输出</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>GPT-3.5</td>

                  <td>
                    0.01元 / 1K tokens
                  </td>

                  <td>
                    0.02元 / 1K tokens
                  </td>
                </tr>
                <tr>
                  <td>GPT-4</td>

                  <td>
                    0.1元 / 1K tokens
                  </td>

                  <td>
                    0.3元 / 1K tokens
                  </td>
                </tr>
                <tr>
                  <td>GPT-V</td>

                  <td>
                    0.1元 / 1K tokens
                  </td>

                  <td>
                    0.3元 / 1K tokens
                  </td>
                </tr>
                <tr>
                  <td>DELL3</td>
                  <td>
                    0.5元 / 张
                  </td>
                  <td>
                    0.5元 / 张
                  </td>
                </tr>
              </tbody>
            </n-table>
          </div>
          <br>
        </NTabPane>
      </NTabs>
    </div>
  </NModal>
</template>
